{% extends "base.html" %}

{% block title %}添加病人{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/add_patient.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="/static/js/add_patient.js"></script>
{% endblock %}

{% block content %}
<div class="main-content">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1><i class="fas fa-user-plus"></i> 添加病人</h1>
        <p class="subtitle">将已有病人添加到病例系统</p>
    </div>

    <!-- 搜索病人区域 -->
    <div class="search-section">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" id="patient-search" placeholder="输入病人ID或姓名搜索...">
        </div>
    </div>

    <!-- 病人信息展示区域 -->
    <div class="patient-info-section" style="display: none;">
        <h2>病人信息</h2>
        <div class="info-grid">
            <div class="info-item">
                <label><i class="fas fa-id-card"></i> 病人ID</label>
                <span id="patient-id"></span>
            </div>
            <div class="info-item">
                <label><i class="fas fa-user"></i> 姓名</label>
                <span id="patient-name"></span>
            </div>
            <div class="info-item">
                <label><i class="fas fa-venus-mars"></i> 性别</label>
                <span id="patient-gender"></span>
            </div>
            <div class="info-item">
                <label><i class="fas fa-birthday-cake"></i> 年龄</label>
                <span id="patient-age"></span>
            </div>
        </div>
    </div>

    <!-- 添加病例表单 -->
    <div class="case-form-section" style="display: none;">
        <h2>病例信息</h2>
        <form id="case-form" class="case-form">
            <div class="form-grid">
                <div class="form-group">
                    <label><i class="fas fa-hospital"></i> 科室</label>
                    <select id="dept-select" required>
                        <option value="">请选择科室</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-clock"></i> 预计住院天数</label>
                    <input type="number" id="predict-days" min="1" required>
                </div>
                <div class="form-group full-width">
                    <label><i class="fas fa-notes-medical"></i> 病情描述</label>
                    <textarea id="description" rows="4" required></textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="secondary-btn" onclick="resetForm()">
                    <i class="fas fa-undo"></i> 重置
                </button>
                <button type="submit" class="primary-btn">
                    <i class="fas fa-plus-circle"></i> 添加病例
                </button>
            </div>
        </form>
    </div>

    <!-- 结果提示框 -->
    <div id="result-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2></h2>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button class="primary-btn" onclick="closeModal()">确定</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
